<template>
    <div class="box">
    <VueDraggable class="drag-area" tag="ul" v-model="list" group="g1">
      <div class="item" v-for="el in modelValue" :key="el.name">
        <p>{{ el.name }}</p>
        <nested-component v-model="el.children" />
      </div>
    </VueDraggable>
    </div>
  </template>
  <script setup lang="ts">
  import { VueDraggable } from 'vue-draggable-plus'
  import { computed } from 'vue'
  
  interface IList {
    name: string
    children: IList[]
  }
  
  interface Props {
    modelValue: IList[]
  }
  
  const props = defineProps<Props>()
  
  interface Emits {
    (e: 'update:modelValue', value: IList[]): void
  }
  
  const emits = defineEmits<Emits>()
  const list = computed({
    get: () => props.modelValue,
    set: value => emits('update:modelValue', value)
  })
  </script>
  <style lang="scss" scoped>

    ul {
        padding-left: 1.25rem;
        margin: 16px 0;
    }

    /* .drag-area {
        min-height: 50px;
        outline: 1px dashed;
    } */



    .box {
    margin: 10px;
    column-count: 2;
    column-gap: 10px;

    @media screen and (min-width: 400px) {
        column-count: 2;
    }

    @media screen and (min-width: 600px) {
        column-count: 3;
    }

    @media screen and (min-width: 800px) {
        column-count: 4;
    }

    @media screen and (min-width: 1100px) {
        column-count: 5;
    }

    .item {
        margin-bottom: 10px;
        /* table {
      border-spacing: 1px;
      border-color: rgb(255, 255, 255);
      width: 100%;
    } */

        .el-collapse {
            border-top: none;

            .el-collapse-item {
                button {
                    background-color: #E6A23C;
                    font-weight: 400;
                    display: block;
                    text-align: center;

                    .el-icon {
                        display: none;
                    }
                }

                .el-collapse-item__header {
                    color: #fff;
                    font-weight: bold;
                }

                .el-collapse-item__wrap {
                    border-bottom: none;
                }
            }

        }

        .el-card {
            min-height: 180px;

            .el-card__header {
                background-color: #409EFF;
                color: #fff;
                text-align: center;
            }

            .el-card__body {
                table {
                    border-spacing: 1px;
                    border-color: rgb(255, 255, 255);
                    width: 100%;
                    font-size: 14px;
                }
            }

            .el-card__footer {
                font-size: 14px;
                color: #606266;
            }

        }


    }

}
  </style>